<template>
    <div class="askLeaveQueryPopup">     
       
        <div class="titlePart" >{{date}}干部请假情况</div>

    
       <div class="searchResult">
                <van-empty description="未查询到请假" v-if="nodata"/>

                <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="!nodata">
                    <van-list
                        class="searchResultList" 
                        v-model:loading="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                    >

                    <ColorItem :color="getColor(item)" class="searchItem" v-for="item in list" >
                        <AskLeaveLog :color="getColor(item)" :item="item" showBtns @detail-popup="handleDetailPopup"/>                        
                    </ColorItem>
                    </van-list>
                </van-pull-refresh>
 
        </div>

        
    </div>
    <VanBackTop v-if="showBackTop" />
</template>
<script lang="ts" setup>
import AskLeaveLog from '@/components/AskLeaveLog.vue';
import ColorItem from '@/components/ColorItem.vue';
import { onMounted, ref, watch } from 'vue';
import { type AskLeave } from '@/types/common';
import http from '@/api/request'
import { formateDateYMD } from '@/util/dateTool';

interface AskLeavePopupProps {
    date?:string
    type?:string
    dateDuration?:number
}

interface AskLeaveList{
    list:AskLeave[]
}

const props = defineProps<AskLeavePopupProps>();

const loading = ref(false)
const begin = ref('')
const end= ref('')
const finished = ref(false)
const list = ref<AskLeave[]>([]);
const nodata = ref(false);
const key = ref('')
const showBackTop = ref(true);

const refreshing = ref(false)
const value1 = ref(0);
const value2 = ref('');
const value3 = ref('')
var pageNo = 1;
 

    const option3 = [
      { text: '所有类型', value: '' },
      { text: '学术交流', value: '1' },
      { text: '工作会议', value: '2' },
      { text: '上级工作任务', value: '3' },
      { text: '学术会议', value: '4' },
      { text: '合作研究', value: '5' },
      { text: '长期任教', value: '6' },
      { text: '短期讲学', value: '7' },
      { text: '培训学习', value: '8' },
      { text: '进修访学', value: '9' },
      { text: '攻读学位', value: '10' },
      { text: '旅游', value: '11' },
      { text: '探亲', value: '12' },
      { text: '其他', value: '13' },
    ];

    onMounted(()=>{
        getList()
    })

    watch(()=>props.date,()=>{
        if(props.date){
            
            pageNo ==1
            begin.value = props.date;
            end.value = props.date;
            getList();
        }
    })
 
const handleDetailPopup = (isShow:boolean)=>{
    console.log('handleDetailPopup:'+isShow)
    showBackTop.value = !isShow;
}


const getList = ()=>{
    //首先日期默认为一个时间段
    var d = new Date();
    begin.value = formateDateYMD(d);
    if(props.dateDuration == 0){
        d.setDate(d.getDate()+7)
        end.value = formateDateYMD(d);
    }
    if(props.dateDuration == 1){
        d.setDate(d.getDate()+14)
        end.value = formateDateYMD(d);
    }
    if(props.dateDuration == 2){
        d.setDate(d.getDate()+30)
        end.value = formateDateYMD(d);
    }

    //如果指定某一天，修改日期范围
    if(props.date){
        begin.value = props.date;
        end.value = props.date;
    }

    if(props.type){
        var tempType = ''
        option3.forEach((item)=>{
            if(item.text == props.type){
                tempType = item.value
            }
        })

        if(tempType){
            value3.value = tempType;
        }
    }
    
    http.get<AskLeaveList>('/askleave/dataList',{
        pageNo,key:key.value,begin:begin.value,end:end.value,
        taskType:value3.value,
        postLevel:value2.value
    }).then((resp)=>{
        refreshing.value=false;
        loading.value=false;
        nodata.value = false;

        if(pageNo ==1) list.value=[];

        if(resp.data?.list){
            if(resp.data.list.length > 0){
                list.value = list.value.concat( resp.data.list);
            }else{
                finished.value = true;
                if(pageNo == 1){
                    nodata.value = true;
                }
            }
            
        }else{
            finished.value=true;
        }
    })
}

const onLoad = ()=>{
    if(pageNo ==1 && list.value.length == 0){ //初始化，不加载
        loading.value=false;
        return;
    }

    pageNo++;
    getList();
}

const onRefresh = ()=>{
    pageNo = 1;
    finished.value=false;
    getList();
}

const getColor = (item:AskLeave)=>{
    
    if(item.post_level == '1')return 'red'
    if(item.post_level == '2')return '#1976D2'
    if(item.post_level == '3')return '#3390ff'
    return '#3390ff'
}
</script>

<style lang="less" scoped>
.askLeaveQueryPopup{
    padding-bottom: 40px;
    
    
    .titlePart{
        font-size:18px;
        text-align: center;
        padding-top: 20px;
    }

  
    .searchPart{        
        background-color: #fff;
        margin:0px;
        margin-top: 20px;
        
        padding-top: 20px;

        .search{
            margin-top: 10px;
        }
    }
    
    .searchResultList{
        .searchItem{
            margin-bottom: 6px;
        }
    }

    .subSection{
        line-height: 30px;
    }

    .searchResult{        
        margin:10px;
        .searchItem{
            background-color: #fff;
        }
    }
}

</style>

<style>
:root {
  --role-teacher: #1976D2;    /* 教职工蓝 */
  --role-student: #388E3C;    /* 学生绿 */
  --role-visitor: #F57C00;    /* 访客橙 */ 
  --role-stranger: #D32F2F;   /* 未登记红 */
}
</style>